<template>
  <div class="box">
    <my-header :showBack="true" :title="title"></my-header>
    <div>
      <div>
        <van-cell-group>
          <van-field
            v-model="phone"
            :label="$t('lang.PhoneTel')"
            :placeholder="$t('lang.telPlaceholder')"
            readonly="readonly"
            clearable
          />
          <van-field
            type="number"
            v-model="code"
            :label="$t('lang.codePlaceholder')"
            :placeholder="$t('lang.InputPlaceholder')"
            clearable>
            <van-button slot="button" size="small" v-if="!isSendMsg" type="primary" @click="checkPhone()">{{$t("lang.SMSBtn")}}</van-button>
            <van-button slot="button" size="small" v-if="isSendMsg" type="primary">{{time}}s</van-button>
          </van-field>
          <van-field
            type="password"
            v-model="oldPwd"
            :label="$t('lang.oldpassword')"
            v-if="smsType===3"
            :placeholder="this.oldPwdPlaceholder"
            clearable
          />
          <van-field
            type="password"
            v-model="oldPwd"
            :label="$t('lang.oldpassword')"
            v-if="smsType===4"
            :placeholder="this.oldPwdPlaceholder"
            clearable
          />
          <van-field
            type="password"
            v-model="newPwd"
            :label="$t('lang.XinPass')"
            :placeholder="$t('lang.EntNewLoPass')"
            v-if="smsType===3"
            clearable
          />
          <van-field
            type="password"
            v-model="newPwdTwo"
            :label="$t('lang.XinPass')"
            clearable
            v-if="smsType===4"
            :placeholder="$t('lang.plaseEntnewSfpass')"
            @click-icon="newPwdTwo = ''"
          />
        </van-cell-group>
      </div>
      <div class="footer_btn">
        <van-button type="primary" size="large" @click="modify">{{$t("lang.ChangeTheImageBtn")}}</van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import header from "@/components/header";

export default {
  name: "modifyPwd",
  data() {
    return {
      phone: "",
      code: "",
      newPwd: "",
      newPwdTwo: "",
      oldPwd: "",
      title: "",
      oldPwdPlaceholder: "",
      newPwdPlaceholder: "",
      smsType: 3,
      canChange: true,
      isSendMsg: false,
      time: 60
    };
  },
  components: {
    "my-header": header
  },
  created() {
    this.getUserInfo() ;
    if (this.$route.params.isLoginPwd === "true") {
      (this.smsType = 3), //修改登录密码
        (this.title =  this.$t('lang.EloginPass'));
      this.oldPwdPlaceholder = this.$t('lang.passwordPlaceholder');
    } else {
      (this.smsType = 4), //修改支付密码
        (this.title =  this.$t('lang.modifySecurityPass'));
    }
  },
  methods: {
    getUserInfo() {
      this.$ajax(this.$api.getMyInfo).then(res => {
        if (res.code === 0 && res.msg) {
          this.userInfo = res.msg;
          this.customerType=res.msg.customerType;
          this.isAuth = res.msg.flagAuth == 0 ? false : true;
          this.phone = res.msg.customerPhone;
          localStorage.setItem("userInfo", JSON.stringify(res.msg));
        }
      });
    },
    //检查是否已经注册和验证码是否正确
    checkPhone: function() {
      this.$ajax(this.$api.sendCode, {
        phone: this.phone,
        smsType: this.smsType
      }).then(res => {
        if (res.code === 0) {
          this.isSendMsg = true;
          Toast({
            message:this.$t('lang.SendSmsTrueTip'),
            position: "bottom",
            duration: 3000
          });
          //倒计时
          let interval = window.setInterval(() => {
            if (this.time-- <= 0) {
              this.time = 60;
              this.isSendMsg = false;
              window.clearInterval(interval);
            }
          }, 1000);
        }else{
          Toast({message: res.msg,position: "bottom"});
        }
      });
    },
    //验证支付密码格式
    validatePwd(pwd) {
      var reg = /^[0-9]{6}$/;
      if (reg.test(pwd)) {
        return true;
      } else {
        return false;
      }
    },
    //验证登录密码格式
    validateLoginPwd(pwd) {
      if (pwd.length >= 6 && pwd.length <= 12) {
        return true;
      } else {
        return false;
      }
    },
    modify: function() {
      if(!this.code){
        Toast({
            message: this.$t('lang.InputPlaceholder'),
            position: "bottom"
          });
          return;
      }
      if (this.smsType == 3) {
        if (!this.validateLoginPwd(this.newPwd)) {
          //验证密码格式是否正确
          Toast({
            message: this.$t('lang.newPass'),
            position: "bottom"
          });
          return;
        }
      } else {
        if (!this.validateLoginPwd(this.newPwdTwo)) {
          //验证支付密码格式是否正确
          Toast({
            message: this.$t('lang.plaseSafePwd'),
            position: "bottom"
          });
          return;
        }
      }
      //修改登录密码
      if (this.$route.params.isLoginPwd === "true") {
        this.$ajax(this.$api.modifyLoginPass, {
          phone: this.phone,
          newPassword: this.newPwd,
          oldPassword: this.oldPwd,
          code: this.code
        }).then(res => {
          if (res.code === 0) {
            this.$router.push({ path: "/login" });
            Toast({
              message: this.$t('lang.PassBeen'),
              position: "bottom",
              duration: 3000
            });
            // localStorage.setItem(token,"");
          }else{
             Toast({
              message: res.msg,
              position: "bottom",
              duration: 3000
            });

          }
        });
      } else {
        //修改支付密码
        this.$ajax(this.$api.changePayPwd, {
          phone: this.phone,
          newPassword: this.newPwdTwo,
          oldPassword: this.oldPwd,
          code: this.code
        }).then(res => {
          // console.log(res);
          if (res.code === 0) {
            this.$router.push({ path: "/my" });
            Toast({
              message: this.$t('lang.TipUpsussPwd'),
              position: "bottom"
            });
          }else{
            Toast({message:this.$t('lang.EditorPError'),position: "bottom"});
          }
        });
      }
    }
  }
};
</script>
<style>
</style>

